<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>日志</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../component/pear/css/pear.css" />
		<link rel="stylesheet" href="../css/layer-css.css" />
		<style>
			.img {
				background-image: url(../images/backgroundImage.png);
				width: 100%;
				height: 300px;
				/* object-fit: cover; */
				/* background-repeat: no-repeat; */
				background-position: center;
				background-size: cover;
			}

			.searchFrom .layui-input {
				height: 45px;
				background: #FFFFFF;
				font-size: 18px;
				border-radius: 20px 20px 20px 20px !important
			}

			.layui-input-suffix {
				padding-right: 38px !important;
			}

			.layui-icon-search {
				font-size: 25px !important;
				line-height: 45px !important;
			}

			.layui-table-box * {
				font-size: 14px !important
			}

			.layui-table tr {
				height: 50px;
				line-height: 50px;
			}

			.layui-table {
				width: 100% !important;
			}

			.layui-table-view {
				padding-bottom: 10px !important;
				background-color: #fff;
			}

			.layui-table-page {
				height: 50px !important;
				background-color: #fff;
			}

			.layui-laypage span {
				font-size: 16px;
			}

			.layui-laypage a {
				font-size: 15px;
			}

			.layui-laypage select {
				border: 1px solid #e6e3e3d6 !important;
				height: 20px;
			}
		</style>
	</head>

	<body style="background-color: #c3d7ec78;">
		<div class="img" id="pullrefresh">
			<div style="margin: 0px 10px;"">
			<div style=" padding-top: 150px;">
				<form class="layui-form searchFrom" lay-filter="form-filter" action="" onsubmit="return false">
					<div class="layui-input-wrap">
						<input type="text" lay-affix="layui-icon layui-icon-search" lay-filter="fileName"
							name="fileName" placeholder="文件名称" class="layui-input">
					</div>
				</form>
			</div>
			<table id="records-table" lay-filter="records-table"></table>
		</div>
		<script type="text/html" id="validArchives-bar">
			<button plain class="pear-btn pear-btn-success pear-btn-xs" lay-event="takeOut">取出档案</button>&nbsp;&nbsp;
		</script>
		<script src="../js/layui/layui.js"></script>
		<script src="../component/pear/pear.js"></script>
		<script src="../js/jquery-3.5.1.js"></script>
		<script src="../js/mui.min.js"></script>
		<script>
			var table = null;
			mui.init({
				swipeBack: false,
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				table.reload('records-table', {
					page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
						// layout: ['limit', 'count', 'prev', 'page', 'next'], //自定义分页布局
						layout: ['prev', 'page', 'next', 'count', 'limit'], //自定义分页布局
						groups: 3, //只显示 1 个连续页码
						first: false, //不显示首页
						last: false, //不显示尾页
						curr: 1
					},
					done: function(res, curr, count) {
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
						mui.toast('下拉刷新成功');
					}

				})
			}

			layui.use(['table', 'form', 'jquery', 'common', 'dtree'], function() {
				table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let dtree = layui.dtree;
				let common = layui.common;
				let cols = [
					[{
							title: '文件名',
							field: 'file_name',
							align: 'center',
							width: 100
						},
						{
							title: '操作',
							field: 'data_status',
							align: 'center',
							templet: function(d) {
								if (d.data_status == 1) {
									return '<span style="color: #069b23;">取出</span>';
								} else {
									return '<span style="color: #e30707;">归还</span>'
								}
							}
						},
						{
							title: '操作时间',
							field: 'create_time',
							align: 'center',
							width: 160
						},

					]
				]
				tableIns = table.render({
					elem: '#records-table',
					url: 'http://192.168.0.201:9010/api/borrowingRecordsList',
					// page: true,
					page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
						// layout: ['limit', 'count', 'prev', 'page', 'next'], //自定义分页布局
						layout: ['prev', 'page', 'next', 'count', 'limit'], //自定义分页布局
						groups: 3, //只显示 1 个连续页码
						first: false, //不显示首页
						last: false //不显示尾页
					},
					cols: cols,
					skin: 'line',
					id: 'records-table',
					// height: 'full-173',
					//解决页码的问题
					done: function(res) {
						// 获得当前页码
						var brforeCurr = tableIns.config.page.curr;
						// 获得当前页的记录数
						var dataLength = table.cache['records-table'].length;
						var count = res.count; // 获得总记录数
						//如果当前页的记录数为0并且总记录数不为0
						if (dataLength == 0 && count != 0) {
							// 刷新表格到上一页
							table.reload("records-table", {
								page: {
									curr: brforeCurr - 1
								}
							});
						}
					}
				});

				form.on('input-affix(fileName)', function(data) {
					var elem = data.elem;
					table.reload('records-table', {
						where: {
							"searchData": elem.value
						}
					})
				});

				$(".layui-input").blur(function(event) {
					var inputKey = $(this).val();
					table.reload('records-table', {
						where: {
							"searchData": inputKey
						}
					})
				});
				
				document.addEventListener('keypress', function(event) {
				    if (event.key === 'Enter') {
						var data = form.val('form-filter');
						document.activeElement.blur();
				        // 执行提交操作
				        table.reload('records-table', {
				        	where: {
				        		"searchData": data.fileName
				        	}
				        })
				    }
				});
			});
		</script>
	</body>

</html>